import { createApp, h } from 'vue'
import CustomDialog from '../components/CustomDialog.vue'

class DialogManager {
  constructor() {
    this.instance = null
    this.container = null
  }

  show(options) {
    return new Promise((resolve, reject) => {
      // 创建容器
      if (!this.container) {
        this.container = document.createElement('div')
        document.body.appendChild(this.container)
      }

      // 创建Vue应用实例
      const app = createApp({
        data() {
          return {
            visible: true
          }
        },
        methods: {
          handleConfirm() {
            this.visible = false
            setTimeout(() => {
              app.unmount()
              resolve(true)
            }, 300)
          },
          handleCancel() {
            this.visible = false
            setTimeout(() => {
              app.unmount()
              resolve(false)
            }, 300)
          },
          handleClose() {
            this.visible = false
            setTimeout(() => {
              app.unmount()
            }, 300)
          }
        },
        render() {
          return h(CustomDialog, {
            visible: this.visible,
            type: options.type || 'alert',
            title: options.title || '提示',
            message: options.message || '',
            confirmText: options.confirmText || '确定',
            cancelText: options.cancelText || '取消',
            showClose: options.showClose !== false,
            onConfirm: this.handleConfirm,
            onCancel: this.handleCancel,
            onClose: this.handleClose
          })
        }
      })

      app.mount(this.container)
    })
  }

  alert(message, title = '提示') {
    return this.show({
      type: 'alert',
      title,
      message,
      confirmText: '确定'
    })
  }

  confirm(message, title = '确认') {
    return this.show({
      type: 'confirm',
      title,
      message,
      confirmText: '确定',
      cancelText: '取消'
    })
  }

  success(message, title = '成功') {
    return this.show({
      type: 'success',
      title,
      message,
      confirmText: '确定'
    })
  }

  error(message, title = '错误') {
    return this.show({
      type: 'error',
      title,
      message,
      confirmText: '确定'
    })
  }

  warning(message, title = '警告') {
    return this.show({
      type: 'warning',
      title,
      message,
      confirmText: '确定'
    })
  }

  info(message, title = '信息') {
    return this.show({
      type: 'info',
      title,
      message,
      confirmText: '确定'
    })
  }
}

// 创建单例
const dialog = new DialogManager()

// 导出
export default dialog

// 便捷方法
export const $alert = (message, title) => dialog.alert(message, title)
export const $confirm = (message, title) => dialog.confirm(message, title)
export const $success = (message, title) => dialog.success(message, title)
export const $error = (message, title) => dialog.error(message, title)
export const $warning = (message, title) => dialog.warning(message, title)
export const $info = (message, title) => dialog.info(message, title)
